import { Form, Input, InputNumber, Modal, Radio, Select, message } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import styles from "./index.less"
import { embeddingModelSave } from "@/services/embeddingModel";

class AddEmbeddingModel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      facInfo: {},
      loading: false
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  initModal = () => {
    this.setState({ visible: true })
  }

  cancelModal = () => {
    this.props.form.resetFields();
    this.setState({ visible: false, facInfo: {}, loading: false });
  }

  doOkValidate = () => {
    const that = this;
    this.props.form.validateFields((error, values) => {
      if (!error) {
        that.doOk(values);
      }
    })
  }

  doOk = async values => {
    const { facInfo } = this.state;
    if (!values.api) {
      values.api = facInfo.modelApiMap[values.modelName];
    };
    values.type = facInfo.type;
    let { fac, ...obj } = values;
    const copyObj = obj;
    this.setState({ loading: true }, async () => {
      const res = await embeddingModelSave(copyObj);
      this.setState({ loading: false }, () => {
        if (res.code == -1) { } else {
          message.info(res.message);
          this.props.refreshParent();
          this.cancelModal();
        }
      })
    })
  }

  render() {
    const { form: { getFieldDecorator, getFieldValue } } = this.props;
    const { visible, facInfo, loading } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
    };

    return (
      <Modal
        title={formatMessage({ id: 'embeddingModel.add.title' })}
        okText={formatMessage({ id: 'common.confirm' })}
        cancelText={formatMessage({ id: 'common.cancel' })}
        onCancel={this.cancelModal}
        onOk={this.doOkValidate}
        visible={visible}
        width={800}
        bodyStyle={{ height: '600px', overflowY: 'scroll' }}
        confirmLoading={loading}
      >
        <Form {...formItemLayout}>
          <Form.Item label={formatMessage({ id: 'embeddingModel.add.modelName' })} extra={formatMessage({ id: 'embeddingModel.add.modelNameTip' })}>
            {getFieldDecorator("name", { rules: [{ required: true, message: formatMessage({ id: 'embeddingModel.add.modelNameRequired' }) }] })(
              <Input placeholder={formatMessage({ id: 'embeddingModel.add.modelNamePlaceholder' })} />
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'embeddingModel.add.modelId' })} extra={formatMessage({ id: 'embeddingModel.add.modelIdTip' })}>
            {getFieldDecorator("model", { rules: [{ required: true, message: formatMessage({ id: 'embeddingModel.add.modelIdRequired' }) }] })(
              <Input placeholder={formatMessage({ id: 'embeddingModel.add.modelIdPlaceholder' })} />
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'embeddingModel.add.apiKey' })} extra={formatMessage({ id: 'embeddingModel.add.apiKeyTip' })}>
            {getFieldDecorator("apiKey", { rules: [{ required: true, message: formatMessage({ id: 'embeddingModel.add.apiKeyRequired' }) }] })(
              <Input.Password visibilityToggle={false} placeholder={formatMessage({ id: 'embeddingModel.add.apiKeyPlaceholder' })} autoComplete="new-password" />
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'embeddingModel.add.apiUrl' })} extra={formatMessage({ id: 'embeddingModel.add.apiUrlTip' })}>
            {getFieldDecorator("api", { rules: [{ required: true, message: formatMessage({ id: 'embeddingModel.add.apiUrlRequired' }) }] })(
              <Input placeholder={formatMessage({ id: 'embeddingModel.add.apiUrlPlaceholder' })} />
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'embeddingModel.add.description' })}>
            {getFieldDecorator("description")(
              <Input.TextArea autoSize rows={3} />
            )}
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(AddEmbeddingModel)